<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>上传</title>
    <link href="c/basic.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="c/jquery.jcrop.css" type="text/css"/>
    <script src="j/jQuery.js" type="text/javascript"></script>
    <script type="text/javascript" src="j/bas ic.js"> </script>
    <script src="j/jquery.ajaxfileupload.js" type="text/javascript"></script>
    <script src="j/jquery.jcrop.js" type="text/javascript"></script>
    <script src="j/avatarCutter.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

            function getFileSize(fileName) {
                var byteSize = 0;
                //console.log($("#" + fileName).val());
                if($("#" + fileName)[0].files) {
                    var byteSize  = $("#" + fileName)[0].files[0].size;
                }else {
                    //var file = document.getElementById(fileName);
                    //var img = new Image();
                    //file.select();
                    //alert(document.selection.createRange().text);
                    //img.src = file.value;
                    //img.style.display="none";

                    //alert(img.readyState);return 0;
                    //if(img.readyState=="complete"){//已经load完毕，直接打印文件大小
                    //        alert(img.fileSize);//ie获取文件大小
                    //}else {
                    //        img.onreadystatechange=function(){
                    //                if(img.readyState=='complete')//当图片load完毕
                    //                        alert(img.fileSize);//ie获取文件大小
                    //        }
                    //}
                    //byteSize = img.fileSize;
                    //byteSize = img.fileSize;
                }
                //alert(byteSize);
                byteSize = Math.ceil(byteSize / 1024) //KB
                return byteSize;//KB
            }
            $("#btnUpload").click(function () {
                var allowImgageType = ['jpg', 'jpeg', 'png', 'gif'];
                var file = $("#file1").val();
                //获取大小
                var byteSize = getFileSize('file1');
                //获取后缀
                if (file.length > 0) {
                    if(byteSize > 2048) {
                        alert("上传的附件文件不能超过2M");
                        return;
                    }
                    var pos = file.lastIndexOf(".");
                    //截取点之后的字符串
                    var ext = file.substring(pos + 1).toLowerCase();
                    //console.log(ext);
                    if($.inArray(ext, allowImgageType) != -1) {
                        ajaxFileUpload();
                    }else {
                        alert("请选择jpg,jpeg,png,gif类型的图片");
                    }
                }
                else {
                    alert("请选择jpg,jpeg,png,gif类型的图片");
                }
            });
            function ajaxFileUpload() {
                $.ajaxFileUpload({
                    url: 'action.php', //用于文件上传的服务器端请求地址
                    secureuri: false, //一般设置为false
                    fileElementId: 'file1', //文件上传空间的id属性  <input type="file" id="file" name="file" />
                    dataType: 'json', //返回值类型 一般设置为json
                    success: function (data, status)  //服务器成功响应处理函数
                    {
                        //var json = eval('(' + data + ')');
                        //alert(data);
                        $("#picture_original>img").attr({src: data.src, width: data.width, height: data.height});
                        $('#imgsrc').val(data.path);
                        //alert(data.msg);

                        //同时启动裁剪操作，触发裁剪框显示，让用户选择图片区域
                        var cutter = new jQuery.UtrialAvatarCutter({
                                //主图片所在容器ID
                                content : "picture_original",
                                //缩略图配置,ID:所在容器ID;width,height:缩略图大小
                                purviews : [{id:"picture_200",width:200,height:200},{id:"picture_50",width:50,height:50},{id:"picture_30",width:30,height:30}],
                                //选择器默认大小
                                selector : {width:200,height:200},
                                showCoords : function(c) { //当裁剪框变动时，将左上角相对图片的X坐标与Y坐标 宽度以及高度
                                    $("#x1").val(c.x);
                                    $("#y1").val(c.y);
                                    $("#cw").val(c.w);
                                    $("#ch").val(c.h);
                                },
                                cropattrs : {boxWidth: 395, boxHeight: 400}



                            }
                        );
                        cutter.reload(data.src);
                        //var purviews = [{id:"picture_200",width:200,height:200},{id:"picture_50",width:50,height:50},{id:"picture_30",width:30,height:30}];

                    },
                    error: function (data, status, e)//服务器响应失败处理函数
                    {
                        alert(e);
                    }
                })
                return false;
            }


            //图片旋转
            function imgRotate(deg){
                var img1 = $("#picture_original>img"),
                    _data = parseInt($(".jc-demo-box").attr("data"));
                if($.browser.version == 8.0 || $.browser.version == 7.0 || $.browser.version == 6.0 ){
                    var sin = Math.sin(Math.PI / 180 * (_data + deg)), cos = Math.cos(Math.PI / 180 * (_data + deg));
                    var _filter = "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + "," +  "M12=" + (-sin)
                        + ",M21=" + sin+ ",M22=" + cos + ",SizingMethod='auto expand')";
                    img1.css({
                        filter: _filter
                    });
                    $('#picture_200 img,#picture_50 img,#picture_30 img').css({
                        filter: _filter
                    });

                }else{
                    var _deg = deg + _data;
                    var _val =  "rotate("+ _deg + "deg)";
                    img1.css({
                        "-webkit-transform": _val,
                        "-moz-transform": _val,
                        "-ms-transform": _val,
                        "-o-transform": _val,
                        "transform": _val
                    });
                    $('#picture_200 img,#picture_50 img,#picture_30 img').css({
                        "-webkit-transform": _val,
                        "-moz-transform": _val,
                        "-ms-transform": _val,
                        "-o-transform": _val,
                        "transform": _val
                    });
                }

                var     fiw = $('#picture_original>img').width(),
                    fih = $('#picture_original>img').height(),
                    ow = Math.floor((395 - fiw) / 2),
                    oh = Math.floor((340 - fih) / 2),
                    cx = $("#small").position().left,
                    cy = $("#small").position().top,
                    rx = 110 / $("#small").width(),
                    ry = 135 / $("#small").height(),
                    rx1 = 73 / $("#small").width(),
                    ry1 = 90 / $("#small").height(),
                    rx2 = 40 / $("#small").width(),
                    ry2 = 48 / $("#small").height();



                if($.browser.version == 8.0 || $.browser.version == 7.0 || $.browser.version == 6.0){
                    pre_img2($('#picture_200 img'), rx, fih, ry, fiw, cx, cy, ow, oh);
                    pre_img2($('#picture_50 img'), rx1, fih, ry1, fiw, cx, cy, ow, oh);
                    pre_img2($('#picture_30 img'), rx2,  fih, ry2, fiw, cx, cy, ow, oh);
                }else{
                    pre_img2($('#picture_200 img'), rx, fiw, ry, fih, cx, cy, ow, oh);
                    pre_img2($('#picture_50 img'), rx1, fiw, ry1, fih, cx, cy, ow, oh);
                    pre_img2($('#picture_30 img'), rx2, fiw, ry2, fih, cx, cy, ow, oh);
                }

                $("#picture_original img").css({
                    left: ow,
                    top: oh
                });

                if( deg > 0){
                    if(_data == 270){
                        _data = 0;
                    }else{
                        _data = _data + 90;
                    }
                }else{
                    if(_data == 0){
                        _data = 270;
                    }else{
                        _data = _data - 90;
                    }
                }
                $("#d").val(_data);
                $(".jc-demo-box").attr("data", _data);
            }
            function pre_img2(obj, rx, iw, ry, ih, cx, cy, ow, oh){
                obj.css({
                    width: Math.round(rx * iw) + 'px',
                    height: Math.round(ry * ih) + 'px'
                });
                if( cy >= oh && cx >= ow){
                    obj.css({
                        marginLeft: '-' + Math.round(rx * (cx - ow)) + 'px',
                        marginTop: '-' + Math.round(ry * (cy - oh)) + 'px'
                    });
                }else if( cy <= oh && cx >= ow){
                    obj.css({
                        marginLeft: "-" + Math.round(rx * (cx - ow)) + 'px',
                        marginTop: Math.round(ry * (oh - cy)) + 'px'
                    });
                }else if( cy >= oh && cx <= ow){
                    obj.css({
                        marginLeft: Math.round(rx * (ow - cx)) + 'px',
                        marginTop: '-' + Math.round(ry * (cy - oh)) + 'px'
                    });
                }else if( cy <= oh && cx <= ow){
                    obj.css({
                        marginLeft: Math.round(rx * (ow - cx)) + 'px',
                        marginTop: Math.round(ry * (oh - cy)) + 'px'
                    });
                }

            };

//默认图像位置
            function cutImage(obj) {
                var w = 395,
                    h = 340,
                    iw = obj.width(),
                    ih = obj.height();
                if(iw > w || ih > h){
                    if(iw / ih > w / h){
                        obj.css({
                            width: w,
                            height: w * ih / iw,
                            top: (h - (w * ih / iw)) / 2,
                            left: 0
                        });
                    }else{
                        obj.css({
                            height: h,
                            width: h * iw / ih,
                            top: 0,
                            left: (w - (h * iw / ih)) / 2
                        });
                    }
                }else{
                    obj.css({
                        left: (w - iw) / 2,
                        top: (h - ih ) / 2
                    });
                }
            }
            $("#idLeft").click(function(e){
                imgRotate(-90);
                return false;
            });
            $("#btns").click(function(e){
                imgRotate(90);
                return false;
            });
            $('#btnCrop').click(function() {
                $.getJSON('action2.php', {x: $('#x1').val(), y: $('#y1').val(), w: $('#cw').val(), h: $('#ch').val(), src: $('#imgsrc').val()}, function(data) {
                    alert(data.msg);
                });
                return false;
            });
        });

    </script>
</head>
<body>
<p><input type="file" id="file1" name="file1" /></p>
<input type="button" value="上传" id="btnUpload"/>
<input type="text" id="imgsrc" name="imgsrc" />
<input type="button" value="裁剪上传" id="btnCrop"/>
<input type="button" value="旋转" id="btns"/>




<div class="wrap" id="jcropdiv">
    <div class="wl">
        <div class="jc-demo-box" data="0">
            <div id="picture_original" class=#picture_original" >

                <img alt="" src="i/bb.jpg" />

            </div>
        </div>

    </div>
    <div class="wr" id="preview-pane">
        <div class="preview-container">

            <div id="picture_200" ></div>
            <div id="picture_50" ></div>
            <div id="picture_30" ></div>
            <input type="hidden" id="x1" name="x1" value="0" />
            <input type="hidden" id="y1" name="y1" value="0" />
            <input type="hidden" id="cw" name="cw" value="0" />
            <input type="hidden" id="ch" name="ch" value="0" />

        </div>
    </div>
    </div>
</body>
</html>